/**
 * 转正人员详细信息
 */
import React from 'react';
import { Avatar, Col, Row, Tag, Tooltip, Typography } from 'antd';
import IconFont from '@/components/IconFont';

const TYPE_MAP = { 1: '个月', 2: '天' };

export default function PersonalCard({ data = {} }) {
    const {
        employeeName = '-',
        workNatureName = '',
        leaderName = '-',
        hrName = '-',
        teacherName = '-',
        entryDate = '-',
        probationPeriodNumber = '-',
        probationPeriodType = '-',
        expectRegularDate = '-',
        dutyName = '-',
        rankValue = '-',
        companyName = '-',
        avatarFile = '',
        fullOrganizationName = ''
    } = data;

    // 讲组织路径转成 微微科技集团 / … / WORK / 格式
    const finalOrganizationName = React.useMemo(() => {
        const nameArr = fullOrganizationName.split('/');
        if (nameArr.length < 4) {
            return fullOrganizationName;
        }
        nameArr.splice(1, nameArr.length - 3, '...');
        return nameArr.join(' / ');
    }, [fullOrganizationName]);

    return (
        <Row type="flex">
            <Avatar src={avatarFile} size={56} />
            <div style={{ flex: 1, marginLeft: 16 }}>
                <div style={{ display: 'flex', alignItems: 'center', marginBottom: 8 }}>
                    <Typography.Title level={3} style={{ marginRight: 8, marginBottom: 0 }}>
                        {employeeName}
                        {/* <span className={styles.englishName}>/Frank Xie</span> */}
                    </Typography.Title>
                    {workNatureName && <Tag>{workNatureName}</Tag>}
                </div>
                <div style={{ display: 'flex', alignItems: 'center', marginBottom: 8 }}>
                    <IconFont icon="icondefault_company_pic_default" style={{ fontSize: 24, color: '#E5E5E5' }} />
                    <Typography style={{ marginLeft: 8, marginRight: 24 }}>{companyName}</Typography>
                    <IconFont icon="iconzuzhijiagouICON" style={{ fontSize: 24, color: '#E5E5E5' }} />
                    <Tooltip title={fullOrganizationName}>
                        <Typography style={{ marginLeft: 8, marginRight: 24 }}>{finalOrganizationName}</Typography>
                    </Tooltip>
                    <IconFont icon="iconzhiweiguanliICON" style={{ fontSize: 24, color: '#E5E5E5' }} />
                    <Typography style={{ marginLeft: 8, marginRight: 24 }}>{`${dutyName} / ${rankValue}`}</Typography>
                </div>

                <div style={{ width: 600 }}>
                    <Row type="flex" style={{ marginBottom: 8 }}>
                        <Col span={8}>
                            <Typography.Text type="secondary">
                                直属上级：<Typography.Text>{leaderName}</Typography.Text>
                            </Typography.Text>
                        </Col>
                        <Col span={8}>
                            <Typography.Text type="secondary">
                                带教人：
                                <Typography.Text>{teacherName}</Typography.Text>
                            </Typography.Text>
                        </Col>
                        <Col span={8}>
                            <Typography.Text type="secondary">
                                人事负责：
                                <Typography.Text>{hrName}</Typography.Text>
                            </Typography.Text>
                        </Col>
                    </Row>
                    <Row type="flex">
                        <Col span={8}>
                            <Typography.Text type="secondary">
                                入职日期：
                                <Typography.Text>{entryDate}</Typography.Text>
                            </Typography.Text>
                        </Col>
                        <Col span={8}>
                            <Typography.Text type="secondary">
                                试用期：
                                <Typography.Text>{`${probationPeriodNumber}${TYPE_MAP[probationPeriodType] ||
                                    ''}`}</Typography.Text>
                            </Typography.Text>
                        </Col>
                        <Col span={8}>
                            <Typography.Text type="secondary">
                                预计转正：
                                <Typography.Text>{expectRegularDate}</Typography.Text>
                            </Typography.Text>
                        </Col>
                    </Row>
                </div>
            </div>
        </Row>
    );
}
